<template>
    <div>
        <el-row :gutter="20" class="marginTop20" v-if="data.length > 0">
            <el-col :span="4" v-for="(item, index) in data" :key="index">
                <div class="videoBox hand radius10">
                    <el-image style="width: 100%;height: 180px;" :src="item.creation_collection.thumbnail" fit="cover"></el-image>
                    <div class="" style="padding: 10px;font-size: 14px;">
                        <div class="omit1">
                            {{ item.creation_collection.name + "（更新至" + item.creation_collection.episodes + "集）" }}
                        </div>
                        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
                            <div class="mt-4 flex align-center">
                                <div class="flex align-center author-name">
                                    <el-image :src="item.creation_collection.user_info.avatar" fit="cover"
                                        style="width: 20px;height: 20px;border-radius:100%;flex-shrink: 0"></el-image>
                                    <span class="color-999 pl-6 font-13">{{ item.creation_collection.user_info.name }}</span>
                                </div>
                                <div class="color-999 pl-6 font-13">{{ item.creation_collection.created_at | getTimeAgo }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div v-else>
          <el-empty :image="empty_image"></el-empty>
        </div>
    </div>
</template>
  
<script>
import pageTool from "@/mixins/page";
export default {
    mixins: [pageTool],
    props: {
        user_id: {
            type: [Number, String]
        }
    },
    data() {
        return {
            query: {
                user_id: '',
                creation_type: 'long',
            },
            empty_image: require('@/assets/image/empty.png'),
            data: []
        }
    },
    mounted() {
        if (this.user_id) {
            this.query.user_id = this.user_id
             this.beforeInit()
        }
    },
    methods: {
        beforeInit() {
            this.url = "/creation/like/index";
            this.append = true;
            this.init(); //重新请求数据
        },

    }

}
</script>
  
<style lang="scss" scoped>
.videoBox {
    background-color: #151225;
    overflow: hidden;
}
</style>